import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux';
@withRouter
@connect(state => state.get('cookbook').toJS(),null)
class Swiper extends Component {
    render() {
        return (
            <Carousel
                autoplay={false}
                infinite

            >
                {this.props.swipers.map(val => (
                        <img
                            onClick={() => this.props.history.push(`/detail/${val.id}`)}
                            key={val.id}
                            src={val.img}
                            alt={val.title}
                            style={{ width: '100%', verticalAlign: 'top', height: 176 }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                    

                ))}
            </Carousel>
        );
    }
}

export default Swiper;

